<template>
	<view class="viewBg">
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-navigate uni-navigate-right" @click="showPicker()">
					<text class="cell-text">{{title}}</text>
					<text class="cell-detail">{{selectedLabel}}</text>
				</view>
			</view>
		</view>
		<view class="lineH1"></view>
		<button type="primary" @tap="getCompanyList(1)">查询企业</button>
		<view class="uni-padding-wrap uni-common-mt" v-for="(item,index) in list" :key="index">
			<view class="uni-card">
				<view class="uni-card-content">
					<view class="uni-card-content-inner">
						<view class="">企业名称：{{item.name}}</view>
						<view class="">所属网格：{{item.gridName}}</view>
						<view class="">{{item.lxr_phone}}</view>
						<view class="">{{item.address}}</view>
						<view class="lookDetail" @tap="getCompanyDetail(item)">查看详情</view>
					</view>
				</view>
			</view>
		</view>
		<mpvue-picker :themeColor="themeColor" ref="mpvuePicker" :mode="mode" :deepLength="deepLength" :pickerValueDefault="pickerValueDefault"
		 @onConfirm="onConfirm" @onCancel="onCancel" :pickerValueArray="pickerValueArray"></mpvue-picker>
	</view>
</template>

<script>
	import mpvuePicker from "@/components/mpvue-picker/mpvuePicker.vue"
	export default {
		components: {
			mpvuePicker
		},
		data() {
			return {
				themeColor: '#007AFF',
				pickerValueArray: [],
				pickerValueDefault: [0],
				title: "选择网格",
				selectedLabel: "请选择",
				selectedValue: '',
				pageNo: 1,

				list: []

			};
		},
		onLoad() {
			this.$http.get('ac/xagrid/appGridService/getMyGridList', {}).then((res) => {
				if (res.errcode === '0' && res.data.length > 0) {
					const _selectList = res.data;
					for (var i = 0; i < _selectList.length; i++) {
						var oItem = new Object; //定义一个对象做字段的转换
						oItem.label = _selectList[i].name;
						oItem.value = _selectList[i].id;
						this.pickerValueArray.push(oItem);
					}
				} else {
					uni.showToast({
						title: res.errmsg,
						mask: false,
						duration: 1500
					});
				}
			});
		},
		onReachBottom() {
			this.pageNo++;
			this.getUserList(2);
		},
		methods: {
			showPicker() { //底部弹窗
				if (this.pickerValueArray.length > 0) {
					this.$refs.mpvuePicker.show();
				} else {
					uni.showToast({
						title: '暂无数据',
						mask: false,
						duration: 1500
					});
				}
			},
			onConfirm(e) { //赋值
				this.selectedLabel = e.label;
				this.selectedValue = e.value[0]; //id
			},
			getCompanyList(e) {
				if (this.selectedValue.length > 0) {
					if (e === 1) { //初始化
						this.pageNo = 1;
						this.list.length = 0;
					}

					this.reload = false;
					uni.stopPullDownRefresh();

					this.$http.get('ac/xagrid/appCompanyService/getCompanyList', {
						pageNo: this.pageNo,
						pageSize: 10,
						gridId: this.selectedValue,
					}).then((res) => {
						if (res.errcode === '0') {
							let obj = res.data.results;
							if (obj.length > 0) {
								this.list = this.list.concat(obj); //向list尾部追加
							}
						} else {
							uni.showToast({
								title: res.errmsg,
								mask: false,
								duration: 1500
							});
						}
					});
				} else {
					uni.showToast({
						title: '请先选择网格',
						mask: false,
						duration: 1500
					});
				}
			},
			getCompanyDetail(e) {
				uni.navigateTo({
					url: './companyDetail/companyDetail?data=' + e.id+'&gridName='+e.gridName,
				});
			}
		}
	}
</script>

<style>
	.viewBg {
		width: 100%;
		height: 100%;

		/* background-color: #0FAEFF; */
	}

	.cell-detail {
		margin-right: 20upx;
	}

	.uni-list-cell-navigate {
		justify-content: space-between;
	}

	.lineH20 {
		height: 20upx;
		width: 100%;
		background-color: #F7F7F7;
	}

	.lineH1 {

		height: 2upx;
		width: 100%;
		/* margin-left: 10upx; */
		background-color: #F7F7F7;
	}

	button {
		margin: 30upx;
	}

	.lookDetail {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		color: #007AFF;
	}
</style>
